<template>
  <view>
    <view class="bslist-t">
      <view :class="tabIndex == 0 ? 'bslist-t-ac' : ''" @click="changeTab(0)"
        >欠费中</view
      >
      <view :class="tabIndex == 1 ? 'bslist-t-ac' : ''" @click="changeTab(1)"
        >已缴费</view
      >
    </view>
    <view class="bslist-c-box">
      <view class="bslist-c">
        <mescroll-body
          class="water_scroll"
          ref="mescrollRef"
          @init="mescrollInit"
          :down="downOption"
          @down="downCallback"
          @up="upCallback"
        >
          <view
            class="bslist-col xb-card"
            v-for="(item, index) in dataList"
            :key="index"
            @click="itemClick(item)"
          >
            <view class="bslist-col-t">
              <text>{{ item.enterpriseName }}</text>
              <text></text>
            </view>
            <view class="bslist-col-c">
              <text :style="{ color: type[tabIndex].color }"
                >{{ tabIndex == 1 ? "缴费" : "欠费" }}金额：{{
                  item.receivableAmount - item.payAmount
                }}元</text
              >
              <text>计费周期：{{ item.beginDate }}-{{ item.deadline }}</text>
            </view>
          </view>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      type: [
        {
          state: "待处理",
          color: "#F74D39",
        },
        {
          state: "未缴费",
          color: "#333333",
        },
      ],
      tabIndex: 0,
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      dataList: [],
      pageInfor: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      stateList: [0, 1],
      feeType: "",
      buildTitle: "",
    };
  },
  onLoad(option) {
    this.feeType = option.feeType;
    switch (this.feeType) {
      case "1":
        this.buildTitle = "厂房租金";
        break;
      case "7":
        this.buildTitle = "物业账单";
        break;
      case "2":
        this.buildTitle = "公寓账单";
        break;
      case "0":
        this.buildTitle = "水电账单";
        break;
      default:
        break;
    }
    this.getTitle(this.buildTitle);
  },
  methods: {
    changeTab(index) {
      this.dataList = [];
      this.tabIndex = index;
      if (index == 0) {
        this.stateList = [0, 1];
      } else if (index == 1) {
        this.stateList = [2];
      }
      this.mescroll.resetUpScroll();
    },
    itemClick(item) {
      uni.navigateTo({
        url: "./info?id=" + item.id + "&tabIndex=" + this.tabIndex,
      });
    },
    /*下拉刷新的回调 */
    downCallback(page) {
      let that = this;
      //联网加载数据
      this.apis.businessApi
        .feBillList({
          pageNum: page.num,
          pageSize: page.size,
          feeType: this.feeType,
          payStateList: this.stateList,
        })
        .then((res) => {
          this.dataList = res.rows;
          console.log(this.dataList);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.buildingApi
        .feBillList({
          pageNum: page.num,
          pageSize: page.size,
          feeType: this.feeType,
          payStateList: this.stateList,
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    getTitle(title) {
      uni.setNavigationBarTitle({
        title: title,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.bslist-t {
  width: 100vw;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  left: 0;
  z-index: 9;

  .bslist-t-ac {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    font-weight: 600;
    font-family: PingFangSC-Medium, PingFang SC;

    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 50%;
      width: 30rpx;
      height: 6rpx;
      background: #6cc04e;
      border-radius: 4rpx;
      transform: translateX(-50%);
    }
  }
}

.bslist-c-box {
  margin-top: 90rpx;
  padding: 20rpx;

  .bslist-c {
    .bslist-col {
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
      margin-bottom: 20rpx;
      padding: 26rpx 32rpx;

      view {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;

        text:nth-child(2) {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36rpx;
        }

        &:nth-child(1) {
          padding-bottom: 24rpx;
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
          border-bottom: 1rpx solid #eee;
        }

        &:nth-child(3) {
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
